<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">class="box"</div>
    <div class="box">class="box"</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 以伪数组格式返回匹配到的所有的元素对象,
        var box = document.querySelectorAll('.box')
        box[0].style.background = "red"
        box[0].style.padding = "10px"

        // 传入后代选择器
        var lis = document.querySelectorAll('.list li')
        console.log(lis);

        // console.log(lis);
        // 此处可以使用forEach
        lis.forEach(function (li) {
            li.style.background = 'orange'
            li.style.padding = '10px'
            li.style.margin = '4px 0'
        })
        var list = document.querySelector('.list')
        console.log(list.children);

        // 如下代码会报错
        // list.children.forEach(function (item) {
        //     console.log(item);
        // })
        var lis2 = document.getElementsByTagName('li')
        console.log(lis2);

        // lis2.forEach(function(item){
        //     console.log(item);
        // })


    </script>
</body>

</html>